<template>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">头像信息</div>
                </template>
                <div class="text item">
                    <div class="avatar">
                        <el-avatar class="avatar" shape="square" :size="50" :src="avatarURL" />
                    </div>
                    <el-upload ref="uploadRef" class="upload-demo" :action="uploadURL" :limit="1" :headers="headers"
                        :data="uploadData" :auto-upload="false" :on-success="uploadSuccess">
                        <template #trigger>
                            <p> <el-button type="primary">选择头像</el-button></p>
                        </template>
                        <div>
                            <el-button type="success" @click="submitUpload">
                                上传头像
                            </el-button>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                <p>限制上传1个文件，且旧文件会被新文件覆盖</p>
                            </div>
                        </template>
                    </el-upload>
                </div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">个人信息</div>
                </template>
                <div class="change-password-box">
                    <el-form ref="ruleFormRef" status-icon :model="form" rules="rules" label-width="140px">
                        <el-form-item prop="password" label="修改密码">
                            <el-input type="password" v-model="form.password" />
                        </el-form-item>
                        <el-form-item prop="password2" label="请再次输入密码">
                            <el-input type="password" v-model="form.password2" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue'
import defaultAvatarURL from '/images/avatar-default.png'
import { uploadPictureURL } from '../../api'
import useToken from '../../stores/token'
import useAdmin from '../../stores/admin'

// 使用useAdmin和useToken获取admin和token
const { admin } = useAdmin()
const { token } = useToken()
const headers = { jwt: token }

// 定义表单数据
const form = reactive({
    password: '',
    password2: ''
})

// 定义头像URL
const avatarURL = ref(admin.avatar || defaultAvatarURL)
const ruleFormRef = ref()
const uploadRef = ref()

// 修改密码
const submitForm = formEl => {

}

// 重置表单
const resetForm = () => {
    ruleFormRef.value.resetFields();
}

// 提交上传
const submitUpload = () => {
    uploadRef.value.submit()
}

// 上传成功
const uploadSuccess = async response => {

}

// 验证密码
const validatePass = (rule, value, callback) => {
    if (value !== form.password) {
        callback(new Error('两次输入密码不一致！'))
    } else {
        callback()
    }
}

// 定义表单验证规则
const rules = reactive({
    password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    },
    {
        min: 6,
        max: 24,
        message: '密码长度为6~24个字符',
        trigger: 'blur'
    },
    ],
    password2: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    },
    {
        validator: validatePass,
        trigger: 'blur'
    }
    ]
})
</script>

<style lang="scss" scoped>
.avatar {
    text-align: center;
}

.upload-demo {
    text-align: center;
}

.box-card {
    height: 316px;
}

.change-password-box {
    padding-top: 38px;
}
</style>